<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>登录界面</title>
		<link href="../../css/default.css" rel="stylesheet" type="text/css" />
		<!--必要样式-->
		<link href="../../css/styles.css" rel="stylesheet" type="text/css" />
		<link href="../../css/demo.css" rel="stylesheet" type="text/css" />
		<link href="../../css/loaders.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div class='login'>
			<div class='login_title'>
				<span>管理员登录</span>
			</div>
			<div class='login_fields'>
				<div class='login_fields__user'>
					<div class='icon'>
						<img alt="" src="../../img/user_icon_copy.png">
					</div>
					<input id="log" name="login" placeholder='用户名' maxlength="16" type='text' autocomplete="off" />
					<div class='validation'>
						<img alt="" src="../../img/tick.png">
					</div>
				</div>
				<div class='login_fields__password'>
					<div class='icon'>
						<img alt="" src="../../img/lock_icon_copy.png">
					</div>
					<input id="pass" name="pwd" placeholder='密码' maxlength="16" type='text' autocomplete="off">
					<div class='validation'>
						<img alt="" src="../../img/tick.png">
					</div>
				</div>
				<div class='login_fields__password'>
					<div class='icon'>
						<img alt="" src="../../img/key.png">
					</div>
					<input name="code" id="code" placeholder='验证码' maxlength="4" type='text' name="ValidateNum" autocomplete="off">
					<div class='validation' style="opacity: 1; right: -5px;top: -3px;">
						<canvas class="J_codeimg" id="myCanvas" onclick="Code();"></canvas>
					</div>
				</div>
				<div class='login_fields__submit'>
					<input id="register" type='button' value='登录'>
				</div>
			</div>
			<div class='success'>
			</div>
			<div class='disclaimer'>
				<p>欢迎登陆后台管理系统</p>
			</div>
		</div>
		<div class='authent'>
			<div class="loader" style="height: 44px;width: 44px;margin-left: 28px;">
				<div class="loader-inner ball-clip-rotate-multiple">
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
			<p>认证中...</p>
		</div>
		<div class="OverWindows"></div>
		<link href="../../layui/css/layui.css" rel="stylesheet" type="text/css" />
		<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
		 crossorigin="anonymous"></script>
		<script type="text/javascript" src="../../js/jquery-ui.min.js"></script>
		<script type="text/javascript" src="../../js/stopExecutionOnTimeout.js?t=1"></script>
		<script src="../../layui/layui.js" type="text/javascript"></script>
		<script src="../../js/Particleground.js" type="text/javascript"></script>
		<script src="../../js/Treatment.js" type="text/javascript"></script>
		<script src="../../js/jquery.mockjax.js" type="text/javascript"></script>
		<script type="text/javascript">
			var canGetCookie = 0; //是否支持存储Cookie 0 不支持 1 支持
			var CodeVal = 0;
			var codeValue = Code();
			codeValue = codeValue.toLowerCase();
			function Code() {
				var code;
				if (canGetCookie == 1) {
					code = createCode("AdminCode");
					var AdminCode = getCookieValue("AdminCode");
					showCheck(AdminCode);
				} else {
					showCheck(code = createCode(""));
				}
				return code;
			}

			function showCheck(a) {
				CodeVal = a;
				var c = document.getElementById("myCanvas");
				var ctx = c.getContext("2d");
				ctx.clearRect(0, 0, 1000, 1000);
				ctx.font = "80px 'Hiragino Sans GB'";
				ctx.fillStyle = "#E8DFE8";
				ctx.fillText(a, 0, 100);
			}
			$(document).keypress(function(e) {
				// 回车键事件  
				if (e.which == 13) {
					$('input[type="button"]').click();
				}
			});
			//粒子背景特效
			$('body').particleground({
				dotColor: '#E8DFE8',
				lineColor: '#133b88'
			});
			$('input[name="pwd"]').focus(function () {
			    $(this).attr('type', 'password');
			});
			$('input[type="text"]').focus(function() {
				$(this).prev().animate({
					'opacity': '1'
				}, 200);
			});
			$('input[type="text"],input[type="password"]').blur(function() {
				$(this).prev().animate({
					'opacity': '.5'
				}, 200);
			});
			$('input[name="login"],input[name="pwd"]').keyup(function() {
				var Len = $(this).val().length;
				if (!$(this).val() == '' && Len >= 5) {
					$(this).next().animate({
						'opacity': '1',
						'right': '30'
					}, 200);
				} else {
					$(this).next().animate({
						'opacity': '0',
						'right': '20'
					}, 200);
				}
			});
			var open = 0;
			layui.use('layer', function() {
				//非空验证
				$('input[type="button"]').click(function() {
					var login = $('input[name="login"]').val();
					var pwd = $('input[name="pwd"]').val();
					var code = $('input[name="code"]').val();
					code = code.toLowerCase();
					if(code != codeValue){
						ErroAlert('验证码错误');
						$('input[name="code"]').val("");
						return false;
					}
					if (login == '') {
						ErroAlert('请输入您的账号');
					} else if (pwd == '') {
						ErroAlert('请输入密码');
					} else if (code == '' || code.length != 4) {
						ErroAlert('输入验证码');
					} else {
						//认证中..
						fullscreen();
						$('.login').addClass('test'); //倾斜特效
						setTimeout(function() {
							$('.login').addClass('testtwo'); //平移特效
						}, 300);
						setTimeout(function() {
							$('.authent').show().animate({
								right: -320
							}, {
								easing: 'easeOutQuint',
								duration: 600,
								queue: false
							});
							$('.authent').animate({
								opacity: 1
							}, {
								duration: 200,
								queue: false
							}).addClass('visible');
						}, 500);

						//登陆
						var JsonData = {
							adminAccout: login,
							adminPassword: pwd
						};
						//此处做为ajax内部判断
						var url = "/server/admin/getAdmins";
						//Ajax提交
						$.ajax({
							type: "post",
							url: url,
							data: JsonData,
							dataType: 'json',
							async: 'false',
							success: function(data) {
								//认证完成
								setTimeout(function() {
									$('.authent').show().animate({
										right: 90
									}, {
										easing: 'easeOutQuint',
										duration: 600,
										queue: false
									});
									$('.authent').animate({
										opacity: 0
									}, {
										duration: 200,
										queue: false
									}).addClass('visible');
									$('.login').removeClass('testtwo'); //平移特效
								}, 2000);
								setTimeout(function() {
									$('.authent').hide();
									$('.login').removeClass('test');
									if (data.code == 0) {
										sessionStorage.setItem("id",data.data.adminId);
										sessionStorage.setItem("adminAccout",data.data.adminAccout);
										//登录成功
										$('.login div').fadeOut(100);
										$('.success').fadeIn(1000);
										$('.success').html(
											"<div style='text-align: center;font-size: 20px;'>登陆成功</div><br /><br /><div style='text-align: center;font-size: 20px;'>欢迎回来</div>"
										);
							 			//跳转操作
										window.setTimeout("location.href = '/ComeOnProject01/SuperAdmin.html'", 3000);
									} else {
										if(data.data=="账户已登陆"){
											var erro = {
												"Status": "Erro",
												"Erro": "账号已登录"
											}
											AjaxErro(erro);
										}else{
											var erro = {
												"Status": "Erro",
												"Erro": "账号名或密码有误"
											}
											AjaxErro(erro);
										}
									}
								}, 2400);
							}
						})
					}
				})
			})
			var fullscreen = function() {
				elem = document.body;
			}
		</script>
	</body>
</html>
